<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="register_bj_box"></view>
		<view class="register_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="register_icon_box">
				<image src="https://www.cccshansong.com/chong_weapp/reg_icon3.png" mode=""></image>
			</view>
			<view class="register_info_box">
				<view class="register_content_box">
					<view class="register_content_title">
						<image src="https://www.cccshansong.com/chong_weapp/reg_title1.png" mode=""></image>
					</view>
					<view class="register_content_bj_box">
						<view style="width: 606rpx;height: 60rpx;"></view>
						<view class="register_content_inp_box">
							 <view class="register_content_inp_left">姓名<text style="color: rgba(255, 77, 79, 1);">*</text></view>
							 <view class="register_content_inp_right">
							 	<input type="text" v-model="name" placeholder="请输入姓名" />
							 </view>	
						</view>
						<view class="register_content_inp_box">
							 <view class="register_content_inp_left">手机号<text style="color: rgba(255, 77, 79, 1);">*</text></view>
							 <view class="register_content_inp_right">
							 	<input type="number" v-model="phone" maxlength="11"  placeholder="请输入手机号" />
							 </view>	
						</view>
						<!-- <view class="register_content_inp_box">
							 <view class="register_content_inp_left">身份证号</view>
							 <view class="register_content_inp_right">
							 	<input type="idcard" maxlength="18" placeholder="请输入身份证号(选填)" />
							 </view>	
						</view> -->
					</view> 
					
				</view>
			
			</view>
			<view class="register_info_box1">
				<view class="register_content_box">
					<view class="register_content_title">
						<image src="https://www.cccshansong.com/chong_weapp/reg_title2.png" mode=""></image>
					</view>
					<view class="register_content_bj_box">
						<view style="width: 606rpx;height: 20rpx;"></view>
						<scroll-view scroll-y="true" class="register_content_desc">
							<view class="desc_box">
								<jyf-parser :html="content" ref="article" :tag-style="tagStyle"></jyf-parser>
							</view>
						</scroll-view> 
					</view>
				</view>
			</view>
			<view class="reg_btn_box" hover-class="hover_class" @click="handleSubmit()">
				<image src="https://www.cccshansong.com/chong_weapp/reg_btn.png" mode=""></image>
			</view>
			<view  style="height: 150rpx;"></view>
		</view>	
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			jyfParser,
			navigationCustom,
		},
		data() {
			return {
				btn_status:true,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back3.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
				name:'',
				phone:'',
				parent_id:'',
				content:'',
				tagStyle: {
					img: 'display: block;width: 100%!important;height:auto!important;',
					p:'margin-bottom: 10rpx;line-height: 50rpx;'
				},
			};
		},
		onLoad(e) {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight
			if(e.parent_id&&e.parent_id!=''){
				a.parent_id = e.parent_id
			}
			a.getArticle()
		},
		
		methods:{
			getArticle(){
				var a =this 
				a.globalajax('common/getConfig',{
					value:'settlement_agreement'
					},'GET',function(res) {
						console.log(res);
						uni.stopPullDownRefresh()
						uni.hideLoading()
						if(res.data.code==200){
							const regex = new RegExp('<img', 'gi');
							var richtext = res.data.data
							richtext = richtext.replace(/<table[^>]*>/gi, '<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:12px;max-width:100%; text-align:left;text-indent: 0em;line-height:12px;">'); 
							a.content = richtext.replace(regex, `<img style="max-width: 100%;"`);	
						}else{	
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						}
					}
				);
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleSubmit(){
				var a = this
				if(a.name==''){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
				}else if(a.phone==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
				}else if(a.phone.length!=11){
					uni.showToast({
						title:'手机号不足11位',
						icon:'none'
					})
				}else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(a.phone)){
					uni.showToast({
						title:'手机号格式不正确',
						icon:'none'
					})
				}else{
					if(a.btn_status){
						a.btn_status = false
						uni.showLoading({
							title:'加载中'
						})
						a.globalajax('apply',{
							mobile:a.phone,
							name:a.name,
							parent:a.parent_id
						},'POST',function(res) {
								console.log(res);
								uni.hideLoading()
								setTimeout(()=>{
									a.btn_status = true
								},1500)
								if(res.data.code==200){
									uni.showToast({
										title:'提交成功，请耐心等待平台审核',
										icon:'none'
									})
									setTimeout(()=>{
										uni.reLaunch({
											url:'/pages/user/login'
										})
									},1200)
								}else{	
									a.$showModal({
										title:'友情提示',
										content:res.data.msg,
										showCancel:false,
										confirmText:'我知道了',
										success: (res) => {
										}
									}); 
								}
							}
						);
					}
				}
					
				
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ffcf57;
}
.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
.register_bj_box{
	width: 750rpx;
	height: 1732rpx;
	background-image: url('https://www.cccshansong.com/chong_weapp/register_bj.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.register_content_box{
	width: 750rpx;
	position: absolute;
	top: 0;
	left: 0;
	.register_icon_box{
		width: 720rpx;
		height: 634rpx;
		margin-left: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.reg_btn_box{
		width: 688rpx;
		height: 118rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.register_info_box1{
		width: 750rpx;
		.register_content_box{
			width: 686rpx;
			height: 322rpx;
			background-color: #FF6853;
			border: 2rpx solid #242831;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			margin: 0 auto;
			margin-top: 16rpx;
			.register_content_title{
				position: absolute;
				top: -20rpx;
				left: -2rpx;
				width: 284rpx;
				height: 64rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.register_content_bj_box{
				width: 95%;
				// height: 95%;
				background-color: #FFF3D7;
				border: 2rpx solid #242831;
				.register_content_desc{
					padding: 32rpx;
					height: 200rpx;
					width: 606rpx;
					.desc_box{
						font-size: 30rpx;
						letter-spacing: 0rpx;
						color: #333333;
						// padding-top: 30rpx ;
						word-break: break-all;
						white-space:normal; 
						word-wrap:break-word;
						word-break:break-word;
					}
				}
				.register_content_inp_box{
					width: 606rpx;
					height: 88rpx;
					border: 2rpx solid #FF6853;
					background-color: #fff;
					display: flex;
					margin: 0 auto;
					margin-bottom: 20rpx;
					.register_content_inp_left{
						height: 88rpx;
						line-height: 88rpx;
						margin-left: 24rpx;
						font-weight: bold;
						color:#242831 ;
						font-size: 30rpx;
						width: 160rpx;
					}
					.register_content_inp_right{
						margin-left: 20rpx;
						input{
							height: 88rpx;
							line-height: 88rpx;
							font-size: 30rpx;
							width: 400rpx;
						}
					}
				}
			}
			
		}
			
	}
	.register_info_box{
		width: 750rpx;
		height: 260rpx;
		position: relative;
		.register_content_box{
			position: absolute;
			left: 32rpx;
			top: -80rpx;
			width: 686rpx;
			height: 304rpx;
			background-color: #FF6853;
			border: 2rpx solid #242831;
			display: flex;
			align-items: center;
			justify-content: center;
			.register_content_title{
				position: absolute;
				top: -20rpx;
				left: -2rpx;
				width: 284rpx;
				height: 64rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.register_content_bj_box{
				width: 95%;
				height: 95%;
				background-color: #FFF3D7;
				border: 2rpx solid #242831;
				.register_content_inp_box{
					width: 606rpx;
					height: 88rpx;
					border: 2rpx solid #FF6853;
					background-color: #fff;
					display: flex;
					margin: 0 auto;
					margin-bottom: 20rpx;
					.register_content_inp_left{
						height: 88rpx;
						line-height: 88rpx;
						margin-left: 24rpx;
						font-weight: bold;
						color:#242831 ;
						font-size: 30rpx;
						width: 160rpx;
					}
					.register_content_inp_right{
						margin-left: 20rpx;
						input{
							height: 88rpx;
							line-height: 88rpx;
							font-size: 30rpx;
							width: 400rpx;
						}
					}
				}
			}
			
		}
	
	}
}
</style>
